<template>
	<view>
		<!-- 搜索框 -->
		<view class="sousuo">
			<uni-section>
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear">
				</uni-search-bar>
			</uni-section>
		</view>
		<!--选定区域  -->





		<!-- 商品列表 -->
		<view class="lists">
			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/jfs/t1/146404/35/20798/287818/6194c77dE46c38f05/079615af08a7126f.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">

					<text>5174</text>
				</view>
			</view>

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/152226/32/6509/99354/5fb62cf3E1f61263f/f3e2625755dc1fc8.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">

					<text>5174</text>
				</view>
			</view>

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/56435/10/9081/326459/5d66432aEf7680bf0/7a85c34318c89cb9.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">
					<text>5174</text>
				</view>
			</view>

			<!-- 每一项商品 -->
			<view class="lists_item">
				<image
					src="http://img11.360buyimg.com/n1/s800x800_jfs/t1/42415/37/16454/289619/60f043bcE89ef2ece/ebf214a95b1fb9ee.jpg"
					mode=""></image>
				<!-- <image src="" mode=""></image> -->
				<uni-badge text="京东自营"></uni-badge>
				<text>老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包</text>
				<view class="RMB">
					<text>5174</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onBackPress() {

		}
	}
</script>

<style lang="scss">
	// 搜索框
	.sousuo {
		margin-top: -30rpx;
	}

	// 商品列数
	.lists {
		padding: 0 22px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.lists_item {
			width: 341rpx;
			height: 528rpx;
			border: 1px solid #8F939C;
			margin-bottom: 20px;

			text {
				font-size: 28px;
			}

			image {
				width: 339rpx;
				height: 339rpx
			}

			.RMB {
				text {
					padding: 10px 0 0 30px;
					font-size: 38rpx;
					color: #E63340;
					margin-top: 10px;
				}

			}
		}
	}
</style>
